<!DOCTYPE html>
<!--
To change this license header, choose License Headers in Project Properties.
To change this template file, choose Tools | Templates
and open the template in the editor.
-->
<html>
    <head>
        <title>TODO supply a title</title>
        <style type="text/css">
            *{
                font-size: 12px;
            }
            input {
                margin: 10px;
            }
            
            body {
                padding:40px;
                
            }
            .topicList {
                width: 300px;
                border: 1px solid #999;
            }
            
            .topicList li {
                list-style: none;
                padding: 8px 0px;
                margin-left: 10px;
                border-bottom: 1px dotted #aaa;
            }
            .topicList ul {
                display: none;
            }
            
            .topicList h3 {
                height:30px;
                background: #347;
                color:#fff;
                border-bottom: 1px solid #fff;
                cursor: pointer;
            }
            /*  写样式的时候尽量使用class
                
            */
            .topicList h3 span {
                position: relative;
                left: 15px;
                top:10px;
            }
        </style>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <script type="text/javascript" src="jquery/jquery-1.8.3.js"></script>
        <script type="text/javascript" src="test/jquery.util.topic.js"></script>
        <script type="text/javascript">
            $(function(){
                $("#sameHome").click(function(event) {
                    var isc = $(this).prop("checked");
                    if (isc) {
                        //val 不是html
                        $("#sendAddress").val($("#homeAddress").val());
                        $("#sendPhone").val($("#homePhone").val());
                    }else {
                        $("#sendAddress").val("");
                        $("#sendPhone").val("");
                    }
                   $("#send input").setReadOnly(isc);
                });
            });
            
        </script>
    </head>
    <body>
        <fieldset>
            <legend>请填入地址</legend>
            <div id="home">
                <h3>输入家庭地址</h3>
                地址:<input type="text" id="homeAddress" name="homeAddress" size="40"/><br/>
                电话:<input type="text" id="homePhone" name="homePhone" size="40"/>
            </div>
            <div id="send">
                <h3>输入邮寄地址</h3><input type="checkbox" id="sameHome"/>是否和家庭地址一样<br/>
                地址:<input type="text" id="sendAddress" name="sendAddress" size="40"/><br/>
                电话:<input type="text" id="sendPhone" name="sendPhone" size="40"/>
            </div>
        </fieldset>
    </body>
</html>
